<template>
  <div id="app">
    <router-view class="router-view" v-if="isRouterAlive" />
    <vue-picture-viewer
      v-if="showPreviewImg"
      :img-data="previewImgs"
      :select-index="previewIndex"
      @close-viewer="showPreviewImg = false"
    />
    <xr-import
      v-if="showFixImport"
      :process-status="crmImportStatus"
      @click.native="fixImportClick"
    />
    <c-r-m-import
      :show.sync="showCRMImport"
      :crm-type="crmType"
      :props="crmProps"
      :cache-show.sync="cacheShow"
      :cache-done="cacheDone"
      @status="crmImportChange"
      @close="crmImportClose"
    />
    <!-- 过期提醒弹框 -->
    <loadOrgExpireReminder></loadOrgExpireReminder>
  </div>
</template>

<script>
/** 常用图片预览创建组件 */
import VuePictureViewer from "@/components/VuePictureViewer/index";
import XrImport from "@/components/XrImport";
import XrImportMixins from "@/components/XrImport/XrImportMixins";
import CRMImport from "@/components/CRMImport";
import { mapGetters } from "vuex";
import cache from "@/utils/cache";
// 过期提醒弹框
import loadOrgExpireReminder from "./components/loadOrgExpireReminder.vue";
export default {
  name: "App",
  components: {
    VuePictureViewer,
    XrImport,
    CRMImport,
    loadOrgExpireReminder
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  mixins: [XrImportMixins],
  data() {
    return {
      showPreviewImg: false,
      previewIndex: 0,
      previewImgs: [],
      isRouterAlive: true,
    };
  },
  computed: {
    ...mapGetters(["activeIndex", "userInfo"])
  },
  watch: {
    $route(to, from) {
      this.showPreviewImg = false; // 切换页面隐藏图片预览
    }
  },
  mounted() {
    this.init();
    this.addBus();
    this.addDocumentVisibilityChange();
    this.setMinHeight();
  },
  methods: {
    init() {
      if (location.pathname && location.pathname != "/") {
        let pathname = JSON.parse(JSON.stringify(location.pathname));
        pathname = pathname.slice(1, pathname.length);
        let orgid = atob(pathname);
        // 存储orgid
        this.$store.commit("SET_ORGID", orgid);
        // 存储登录背景图片
        this.$store.dispatch("GetLogoAndName");
      } else {
        // this.$router.push('/login')
        if (this.$store.state.init.orgId) {
          this.$store.dispatch("LogOut").then(() => {
            this.$store.commit("SET_ORGID", "");
          });
        }
      }
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    addDocumentVisibilityChange() {
      // 网页当前状态判断
      // hidden,
      var state, visibilityChange;
      if (typeof document.hidden !== "undefined") {
        // hidden = 'hidden'
        visibilityChange = "visibilitychange";
        state = "visibilityState";
      } else if (typeof document.mozHidden !== "undefined") {
        // hidden = 'mozHidden'
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
      } else if (typeof document.msHidden !== "undefined") {
        // hidden = 'msHidden'
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
      } else if (typeof document.webkitHidden !== "undefined") {
        // hidden = 'webkitHidden'
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
      }
      // 添加监听器，在title里显示状态变化
      document.addEventListener(
        visibilityChange,
        () => {
          if (document[state] == "visible") {
            if (cache.updateAxiosHeaders() && this.$route.name === "login") {
              window.location.reload();
            }
          }
          this.$bus.emit("document-visibility", document[state]);
          this.$bus.emit("unDoingThing", document[state]);
        },
        false
      );
    },

    addBus() {
      var self = this;
      this.$bus.on("preview-image-bus", function(data) {
        self.previewIndex = data.index;
        self.previewImgs = data.data;
        self.showPreviewImg = true;
      });
    },

    setMinHeight() {
      this.$nextTick(() => {
        const dpr = window.devicePixelRatio || 1;
        const clientWidth = document.body.clientWidth;
        const dom = document.getElementById("app");
        if (dpr !== 1 && clientWidth > 1600) {
          dom.style.minHeight = "800px";
        } else if (dpr === 1 && clientWidth > 1600) {
          dom.style.minWidth = "1650px";
        } else {
          // dom.style.minWidth = '1200px'
          dom.style.minHeight = "605px";
        }
      });
    }
  }
};
</script>

<style>
#app {
  width: 100%;
  position: relative;
  height: 100%;
  min-width: 1200px;
  min-height: 605px;
}
.el-date-editor .el-range-separator {
  width: 7%;
}
</style>
